<!-- 核查及证明材料页面 -->
<template>
  <div class="verification-materials">
    <el-card shadow="never" style="margin-bottom: 20px;">
      <el-header class="card-header">
        <h3>核查及证明材料</h3>
      </el-header>
      
      <el-main>
        <el-form ref="verificationForm" label-width="120px">
          <!-- 文件上传区域 -->
          <el-form-item label="排放数据报告">
            <el-upload
              action="/api/upload"
              :headers="uploadHeaders"
              :on-success="handleSuccess"
              :before-upload="beforeUpload"
              multiple
              accept=".pdf, .doc, .docx"
              list-type="picture-card"
              :file-list="emissionReportFiles">
              <i class="el-icon-plus"></i>
              <div class="el-upload__text">点击上传或拖拽文件到这里</div>
            </el-upload>
          </el-form-item>

          <el-form-item label="第三方审计报告">
            <el-upload
              action="/api/upload"
              :headers="uploadHeaders"
              :on-success="handleSuccess"
              :before-upload="beforeUpload"
              multiple
              accept=".pdf, .doc, .docx"
              list-type="picture-card"
              :file-list="auditReportFiles">
              <i class="el-icon-plus"></i>
              <div class="el-upload__text">点击上传或拖拽文件到这里</div>
            </el-upload>
          </el-form-item>

          <!-- 其他相关证明材料的上传组件... -->

          <el-form-item>
            <el-button type="primary" @click="submitVerification">提交审核</el-button>
          </el-form-item>
        </el-form>
        
        <!-- 已上传文件预览列表 -->
        <div v-if="emissionReportFiles.length || auditReportFiles.length">
          <h4>已上传文件</h4>
          <ul>
            <li v-for="(file, index) in emissionReportFiles" :key="index">
              <a :href="file.url" target="_blank">{{ file.name }}</a>
              <el-button size="small" type="danger" @click="removeFile(file, 'emissionReportFiles')">删除</el-button>
            </li>
            <li v-for="(file, index) in auditReportFiles" :key="index">
              <a :href="file.url" target="_blank">{{ file.name }}</a>
              <el-button size="small" type="danger" @click="removeFile(file, 'auditReportFiles')">删除</el-button>
            </li>
          </ul>
        </div>
      </el-main>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      emissionReportFiles: [],
      auditReportFiles: [],
      uploadHeaders: {
        // 这里放置需要携带到后端的认证信息等头部数据
      },
    };
  },
  methods: {
    beforeUpload(file) {
      const acceptedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
      return acceptedTypes.includes(file.type);
    },
    
    handleSuccess( ) {

    },

    removeFile(file, fileListKey) {
      // 移除对应数组中的文件对象，并在实际应用中可能需要调用后端接口删除服务器上的文件
      let fileListToUpdate = this[`${fileListKey}`];
      fileListToUpdate.splice(fileListToUpdate.indexOf(file), 1);
    },

    submitVerification() {
      // 提交表单，将所有上传的文件信息发送至后端进行审核
      // 这里假设已经收集了所有必要的信息并将其整合成一个对象
      const verificationData = {
        emissionReports: this.emissionReportFiles.map(file => file.url),
        auditReports: this.auditReportFiles.map(file => file.url),
        // 其他相关信息...
      };

      // 调用API提交审核
      this.submitVerificationToAPI(verificationData);
    },

    submitVerificationToAPI() {
      // 实际请求后端API的方法，这里仅作示例
      // ...
    },
  },
};
</script>